<template>
  <view>
    <view class="content">
      <view>
        <template class="tabs">
          <u-tabs :list="typeList"
                  @click="click"></u-tabs>
        </template>
      </view>
      <view class="none_msg"
            v-show="informationList.length==0">
        <image src="../../static/image/zpzx_img_k@2x.png"
               mode=""></image>
      </view>

      <scroll-view class="list_box"
                   scroll-y="true"
                   refresher-enabled="true"
                   :refresher-triggered="triggered"
                   :refresher-threshold="100"
                   refresher-background="#F5F5F5"
                   @refresherpulling="onPulling"
                   @refresherrefresh="onRefresh"
                   @refresherrestore="onRestore"
                   @refresherabort="onAbort">
        <navigator class="list_item"
                   :url="`/pages/information/news_det?id=${item.id}`"
                   v-for="(item,index) in informationList"
                   :key="index">
          <view class="list_left">
            <image mode="aspectFit"
                   :src="$serverIp+item.image"></image>
          </view>
          <view class="list_right">
            <view class="list_title">{{item.name}}</view>
            <view class="list_time">{{item.createtime}}</view>
            <view class="list_data_box">
              <view class="list_read_num">
                <image src="../../static/image/zcht_ico_yd_nor@2x.png"
                       mode=""></image>{{item.read_num}}
              </view>
              <view class="list_com_num">
                <image src="../../static/image/sy_ico_pj@2x.png"
                       mode=""></image>{{item.comment_num}}
              </view>
            </view>
          </view>
        </navigator>
      </scroll-view>
      <view class="bom_line"></view>
    </view>

  </view>

  <!-- <u-empty mode="car"
             icon="http://cdn.uviewui.com/uview/empty/car.png">
    </u-empty>
  </view> -->
</template>


<script>
export default {
  data() {
    return {
      triggered: false,
      // navHeight: 0,
      typeList: [],
      informationList: [],
      queryParams: { type_id: 1, token: uni.getStorageSync('userinfo').token }
    }
  },
  onLoad() {
    this.getTypeList()
    this.getInformationList()
  },
  methods: {
    //zhang/Recruitinformation/get_type_list
    async getTypeList() {
      const { data } = await this.$http.post('/zhang/Recruitinformation/get_type_list')
      console.log(data)
      this.typeList = data.data
    },
    //zhang/Recruitinformation/get_information_list
    async getInformationList() {
      const { data } = await this.$http.post('/zhang/Recruitinformation/get_information_list', this.queryParams)
      console.log(data)
      this.informationList = data.data
    },
    click(item) {
      console.log('item', item)
      this.queryParams.type_id = item.id
      this.getInformationList()
    }
  }
}
</script>

<style lang="scss">
.content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.tabs {
  width: 750rpx;
  height: 100rpx;
  position: fixed;
  top: 300rpx;
  left: 0rpx;
}

.tabber_item {
  width: auto;
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  display: flex;
  margin: 0 30rpx;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-shrink: 0;
}

.chooseactive {
  width: auto;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  margin: 0 30rpx;
}

.title_line {
  width: 60rpx;
  height: 4rpx;
  background: #ffdd47;
  border-radius: 2rpx;
  margin-top: 5rpx;
}
.list_box {
  width: 100%;
  height: 100vh;
  /* border:1rpx solid red */
}
.list_item {
  height: auto;
  width: 100%;
  padding: 0rpx 30rpx;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 30rpx;
  background-color: #ffffff;
}
.list_left image {
  width: 196rpx;
  height: 130rpx;
  border-radius: 10rpx;
  margin-right: 20rpx;
  background-color: #f5f5f5;
}
.list_right {
  height: 100%;
  width: 85%;
  padding-bottom: 30rpx;
  border-bottom: 1rpx solid #f5f5f5;
}
.list_title {
  width: 480rpx;
  padding-right: 10rpx;
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.list_time {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #999999;
  margin-top: 10rpx;
}
.list_data_box {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10rpx;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  padding-right: 220rpx;
}
.list_read_num {
  display: flex;
  align-items: center;
}
.list_com_num {
  display: flex;
  align-items: center;
  margin-left: 100rpx;
}
.list_read_num image {
  width: 27rpx;
  height: 26rpx;
  margin-right: 10rpx;
}
.list_com_num image {
  width: 28rpx;
  height: 26rpx;
  margin-right: 10rpx;
}
.bom_line {
  width: 100%;
  height: 160rpx;
}
/* 暂无消息 */
.none_msg {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 300rpx;
}

.none_msg image {
  width: 354rpx;
  height: 323rpx;
}

.none_title {
  font-size: 26rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
  margin-top: 40rpx;
}
</style>
